<!-- 项目需求库页面 -->
<template>
    <div>
        <!-- 头部搜索板块 -->
        <div style="margin-top: 20px; margin-left: 20px;">
            <el-form :inline="true" class="demo-form-inline">
                <el-form-item label="需求名">
                    <el-input v-model="nameWord" placeholder="请输入需求名称" style="width: 200px;" />
                </el-form-item>
                <el-form-item label="部门名称">
                    <el-select v-model="deptName" placeholder="请选择部门" style="margin-left: 6px; margin-right: 6px;">
                        <el-option v-for="item in deptNames" :key="item" :label="item" :value="item" />
                    </el-select>
                </el-form-item>
                <el-form-item label="选择年份" prop="dateTime">
                    <el-date-picker v-model="searchTime" type="year" format="yyyy" value-format="yyyy" placeholder="选择年份" style="width: 200px;" />
                </el-form-item>
                <el-form-item>
                    <el-button style="margin-left: 15px;" type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
                    <el-button style="margin-left: 15px;" type="primary" icon="el-icon-refresh" @click="rest">重置</el-button>
                    <router-link :to="{name: 'ProjectRequirementsLibraryCreate'}">
                        <el-button style="margin-left: 15px;" type="danger" icon="el-icon-circle-plus-outline">添加需求</el-button>
                    </router-link>
                    <router-link :to="{name: 'ProjectRequirementsOpenFile'}">
                        <el-button style="margin-left: 15px;" type="danger" icon="el-icon-circle-plus-outline">查看已归档需求</el-button>
                    </router-link>
                </el-form-item>
            </el-form>
        </div>
        <!-- 中间表格板块 -->
        <div>
            <el-table stripe :data="demandPassData" style="width: 100%; margin: 1% 10px;">
                <el-table-column prop="id" align="center" label="需求编号" />
                <el-table-column prop="demandName" align="center" label="需求名称" />
                <el-table-column prop="deptName" align="center" label="发布部门" />
                <el-table-column prop="realName" align="center" label="发布人" />
                <el-table-column prop="createTime" align="center" label="发布日期" />
                <el-table-column prop="isClose" align="center" label="对外开放">
                    <template slot-scope="scope">
                        <span v-html="passStatus(scope.row.isOpen)" />
                    </template>
                </el-table-column>
                <el-table-column align="center" label="操作" width="250px">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" plain @click="updateDemand(scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger" plain @click="deleteDemand(scope.row)">删除</el-button>
                        <el-button size="mini" type="success" plain @click="openFile(scope.row)">归档</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div style="display: flex; justify-content: flex-end; margin-top: 20px;">
                <el-pagination background layout="sizes, prev, pager, next,jumper, ->, total" :total="total" @current-change="currentChange" @size-change="sizeChange" />
            </div>
        </div>
    </div>
</template>

<script>

import {Message} from 'element-ui'

export default {
    name: 'ProjectRequirementsLibraryIndex',
    data() {
        return {
            nameWord: '',
            deptName: '',
            searchTime: '',
            demandPassData: [],
            deptNames: [],
            dialogVisible: false,
            details: {},
            total: 0,
            page: 1,
            size: 10
        }
    },
    mounted() {
        this.initDemandPassData()
        this.initDeptName()
    },
    methods: {
        sizeChange(size) { // 分页页数
            this.size = size
            this.handleQuery()
        },
        currentChange(currentPage) { // 分页当前页触发
            this.page = currentPage
            this.handleQuery()
        },
        showDetails(row) { // 对话框展示详情
            this.dialogVisible = true
            this.details = row
        },
        handleQuery() { // 搜索功能
            var param = {nameWord: this.nameWord, deptName: this.deptName, searchTime: this.searchTime, page: this.page, size: this.size}
            this.getRequest('/demand/super/selectAll', param).then(resp => {
                if (resp.status === 200) {
                    this.demandPassData = resp.data.data
                }
            })
        },
        rest() {
            this.nameWord = ''
            this.deptName = ''
            this.searchTime = ''
            this.initDemandPassData()
        },
        initDemandPassData() { // 初始获取项目需求库信息表格
            this.getRequest('/demand/super/selectAll').then(resp => {
                if (resp) {
                    this.demandPassData = resp.data.data
                    this.total = resp.data.total
                }
            })
        },
        initDeptName() { // 初始获取部门下拉选择信息
            this.getRequest('/system/cfg/dept/getDeptName').then(resp => {
                if (resp) {
                    this.deptNames = resp.data
                }
            })
        },
        passStatus(cellValue) { // 终止状态显示
            if (cellValue === true) {
                return ('<span style="color: #67C23A">是</span>')
            }
            if (cellValue === false) {
                return ('<span style="color: #F56C6C">否</span>')
            }
        },
        deleteDemand(data) {
            this.deleteFormRequest('/delete/' + data.id).then(resp => {
                if (resp.status === 200) {
                    Message.success('删除成功')
                    this.initDemandPassData()
                }
            })
        },
        openFile(data) {
            this.postRequest('/openFile/' + data.id).then(resp => {
                if (resp.status === 200) {
                    Message.success('归档成功')
                    this.initDemandPassData()
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.el-button--close {
    background-color: #66b1ff;
    color: #fff;
}
.one {
    display: flex !important;
}
.first {
    display: flex;
    margin-left: 40px;
    margin-bottom: 25px;
    align-items: center;
}
.name {
    color: #888;
    font-size: 14px;
}
.desc {
    display: flex;
    margin-left: 20px;
    margin-bottom: 25px;
}
.statue {
    margin-left: 20px;
    padding-bottom: 15px;
    margin-top: 15px;
}
.con {
    font-size: 14px;
    color: black;
}
.name1 {
    color: #888;
    font-size: 14px;
    margin-left: 28px;
}
</style>
